<template>
    <div style="width:100%;height:100%;display:flex;flex-direction: column;">
        <div style="border-left: 5px solid black;padding:10px;width:115px;margin:10px 0;">
            软件测试申请
        </div>
        <div style="
        width:100%;
        height:100%;
        background-color: white;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        display:flex;
        flex-direction:column;
        align-items: center;
        border-radius: 20px;
        ">
            <div style="display:flex;width:99%;margin: 20px;">
                <div class="ApplyToUseLeft" @click="ApplyToUse(0)"
                    style="display: flex;flex-direction: column;align-items: flex-start;justify-content: center;">
                    <div>
                        客户试用
                    </div>
                    <div>{{ countOfSoftOrder }}</div>
                    <div v-if="increaseOfCustomer != 'Infinity'" style="font-size: small;">同比上月{{ increaseOfCustomer >= 0 ?
                        '增长' : '降低' }}{{ increaseOfCustomer }}%</div>
                    <div style="font-size: small;">上月无新增试用</div>
                </div>
                <div class="ApplyToUseRight" @click="ApplyToUse(1)"
                    style="display: flex;flex-direction: column;align-items: flex-start;justify-content: center;">
                    <div>内部测试</div>
                    <div>{{ countOfTestSoftOrder }}</div>
                    <div v-if="increaseOfTestCustomer != 'Infinity' && isNaN(increaseOfTestCustomer) == false"
                        style="font-size: small;">同比上月{{ increaseOfTestCustomer >= 0 ?
                            '增长' : '降低' }}{{ increaseOfTestCustomer }}%</div>
                    <div v-else style="font-size: small;">上月无新增试用</div>
                </div>
            </div>
            <div id="MyLineChart"
                style="width: 99%;height:80%;margin: 0 10px 10px 10px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 20px;">

            </div>
        </div>
    </div>
</template>

<script>
import request from "../axios/request";
export default {
    data() {
        return {
            countOfTestSoftOrder: null,
            increaseOfTestCustomer: null,
            countOfSoftOrder: null,
            increaseOfCustomer: null,
            ListOfCustomer: null,
            ListOfTest: null
        }
    },
    methods: {
        ApplyToUse(index) {
            let name = null;
            switch (index) {
                case 0:
                    name = 'TableDataCom'
                    break;
                default:
                    name = 'GetSoftWareCode'
                    break;
            }

            this.$router.push({
                name: name,
                params: {
                    content: index
                },
            });
        },
        showLineChart() {
            request({
                url: "/business/api/softOrder/getDataOfEachMonth",
                method: "GET"
            }).then(res => {
                this.ListOfCustomer = res.data.data["notTest"]
                this.ListOfTest = res.data.data["Test"]
                // 获取组件实例
                const machart = this.$echarts.init(document.getElementById("MyLineChart"));

                // 设置配置项
                const option = {
                    legend: {
                        // orient: 'vertical',
                        left: '5%',
                        top: '20px',
                        icon: 'circle',
                        textStyle: {
                            fontSize: 15
                        },
                        data: ['用户测试', '内部测试']
                    },
                    xAxis: {
                        data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    },
                    yAxis: {},
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        top: '100px',
                        left: '5%',
                        right: '5%',
                        bottom: '10%'
                    },
                    toolbox: {
                        right: 50,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    dataZoom: [
                        {
                            startValue: "Jan"
                        },
                        {
                            type: 'inside'
                        }
                    ],
                    series: [
                        {
                            name: "用户测试",
                            data: this.ListOfCustomer,
                            type: "line",
                            // stack: "x",
                            color: 'rgb(7, 129, 224)'
                        },
                        {
                            name: "内部测试",
                            data: this.ListOfTest,
                            type: "line",
                            // stack: "x",
                            color: 'rgb(11, 204, 175)'
                        },
                    ],
                };
                machart.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    machart.resize();
                });
            });
        },
    },
    async mounted() {
        // 正式使用
        let resOfGetAllCountOfSoftOrder = await request({
            url: "/business/api/softOrder/getAllCountOfSoftOrder",
            method: "GET"
        });
        this.countOfSoftOrder = resOfGetAllCountOfSoftOrder.data.data
        // console.log(this.countOfSoftOrder);
        let resOfGetIncreaseOfThisMonth = await request({
            url: "/business/api/softOrder/getIncreaseInThisMonth",
            method: "GET"
        });
        this.increaseOfCustomer = resOfGetIncreaseOfThisMonth.data.data * 100
        // console.log(this.increaseOfCustomer);
        // 测试使用
        let resOfGetTestCountOfSoftOrder = await request({
            url: "/business/api/softOrder/getAllCountOfTestSoftOrder",
            method: "GET"
        });
        this.countOfTestSoftOrder = resOfGetTestCountOfSoftOrder.data.data
        // console.log(this.countOfTestSoftOrder);
        let resOfGetIncreaseOfThisMonthOfTest = await request({
            url: "/business/api/softOrder/getIncreaseInThisMonthOfTest",
            method: "GET"
        });
        this.increaseOfTestCustomer = resOfGetIncreaseOfThisMonthOfTest.data.data * 100
        // console.log(isNaN(this.increaseOfTestCustomer) );
        this.showLineChart()
    },
}
</script>

<style scoped>
.ApplyToUseLeft {
    width: 250px;
    height: 150px;
    margin: 0 20px 0 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
    background: url("../assets/Image_202312111610291.png");
    background-size: 100% 100%;
    border-radius: 20px;
    box-shadow: 0 5px 5px 0 rgba(7, 129, 224, 0.35);
    color: white;
}

.ApplyToUseRight {
    width: 250px;
    height: 150px;
    margin: 0 10px 0 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
    background-image: url("../assets/Image_20231211161029.png");
    background-size: 100% 100%;
    border-radius: 20px;
    box-shadow: 0 5px 5px 0 rgba(11, 204, 175, 0.35);
    color: white;
}

.ApplyToUseLeft div {
    margin: 5px 10px;
    font-size: large;
}

.ApplyToUseRight div {
    margin: 5px 10px;
    font-size: large;
}
</style>